<template>

  <el-container>
    <el-header class="header">

      <LayoutHeader></LayoutHeader>

    </el-header>
    <el-container class="containerWrapper">
      <el-aside width="200px " class="aside">

        <NavMenu/>

      </el-aside>
      <el-main class="main">
        <div class="contentView">
          <!--        <router-view></router-view>-->
          <RouterView></RouterView>
          <!-- 返回顶部 -->
          <el-backtop :right="100" :bottom="100"/>
        </div>
      </el-main>
    </el-container>
  </el-container>


</template>

<script setup name="Home">
import NavMenu from '@/components/NavMenu.vue';
import LayoutHeader from '@/components/LayoutHeader.vue';</script>

<style scoped>
/*参考样式： https://demo.orangeforms.com/#/main/welcome*/
.header {
  /*background-color: #6C6F6F;*/
  /*color: white;*/
  line-height: 60px;
}


.containerWrapper {
  height: calc(100vh - 60px);
}

.aside {
  background-color: #545C64;

}


main {
  background-color: #ECF5FF;
  box-shadow: inset 0 8px 10px grey;
  height: 100%;
  width: 100%;
}

.contentView {
  height: 100%;
  width: 100%;
  overflow-y: auto;
  overflow-x: hidden;
}
</style>
